<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <style type = "text/css">
                    #table{
                        widows: 600px;
                        height:200px;
                        background-color: collapse;
                    }
                    #table td,th{
                        border: 1px solid #c5c9ce;
                    }
                    #table th{
                        background-color: #95B3D7;
                        color:white;
                    }
                    #table td:first-child,td:last-child{
                        text-align: center;
                    }
                    #table td:last-child{
                        color:#2172B8;
                        cursor:pointer;

                    }
                </style>
    </head>
    <body>
        <table id="table">
            <tr>
                <th>用户ID</th>
                <th>用户姓名</th>
                <th>手机号码</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>zhangsan</td>
                <td>张三</td>
                <td>13899999999</td>
                <td>可用</td>
                <td>
                    <a onclick="update(1)">修改</a>
                    <a onclick="deletes(1)">删除</a>
            </td>
            </tr>
            <tr>
                <td>lisi</td>
                <td>李四</td>
                <td>13866666666</td>
                <td>可用</td>
                <td>
                    <a onclick="update(2)">修改</a>
                    <a onclick="deletes(2)">删除</a>
            </td>
            </tr>
            <tr>
                <td>wangermazi</td>
                <td>王二</td>
                <td>13888888888</td>
                <td>可用</td>
                <td>
                    <a onclick="update(3)">修改</a>
                    <a onclick="deletes(3)">删除</a>
            </td>
            </tr>
        </table>
        <script type="text/javascript">
            var table = document.getElementById("table");
            function deletes(index){
                var cells = table.rows[index].cells;
                if(!confirm("您确认删除一条记录吗？")){
                alert("操作已取消")
                return;
            }
            for(var i=0;i<cells.length;i++){
                cells[i].style.color="#CCC";
                cells[i].style.textDecoration = "line-through";
            }
            var a = cells[cells.length-1].getElementsByTagName("a");
            a[0].removeAttribute("onclick");
            a[1].removeAttribute("onclick");
        }
        function update(index){
            var cells = table.rows[index].cells;
            var a = cells[cells.length-1].getElementsByTagName("a");
            if(a[0].innerText=="修改"){
                for(var i=0;i<cells.length-1;i++){
                    cells[i].setAttribute("contentditable","true");
                }
                a[0].innerText="完成";
            }
            document.onkeyup=function(e){
                if(e.keyCode==13){
                    return false;
                    for(var i =0;i<cells.length-1;i++){
                        cells[i].setAttribute("contenteditable","false");
                    }
                    a[0].innerText="修改";
                }
            }
        }
</script>
    </body>
</html>